<script setup name="visualPannel4">
import warehouseBoard1 from '@/views/visual/modules/warehouseBoard1.vue'
import warehouseBoard2 from '@/views/visual/modules/warehouseBoard2.vue'
import warehouseBoard3 from '@/views/visual/modules/warehouseBoard3.vue'
import warehouseBoard4 from '@/views/visual/modules/warehouseBoard4.vue'
import warehouseBoard5 from '@/views/visual/modules/warehouseBoard5.vue'
import warehouseBoard6 from '@/views/visual/modules/warehouseBoard6.vue'
import moment from 'moment'

const updateTime = ref('')
const timer = ref()
const key = ref(0)

const time = ref(300)

// 自动更新时间五分钟
const updateData = () => {
  timer.value = setInterval(() => {
    if (time.value > 0) {
      time.value--
      const duration = moment.duration(time.value * 1000) // 转换为毫秒

      const minutes = duration.asMinutes() // 总分钟数（包含小数部分）
      const wholeMinutes = Math.floor(minutes) // 取整得到分钟数
      const remainingSeconds = Math.round((minutes - wholeMinutes) * 60) // 计算剩余的秒数
      updateTime.value = `${wholeMinutes}分${remainingSeconds}秒`
    } else {
      time.value = 300
      key.value++
    }
  }, 1000)
}

onMounted(updateData)
onUnmounted(() => {
  timer.value >= 0 && clearInterval(timer.value)
})
</script>

<template>
  <div class="ps_board warehouseBoard">
    <el-row>
      <el-col>
        <ps-header :showDecoration5="false" :updateTime="updateTime" />
      </el-col>
    </el-row>

    <div class="content">
      <div class="left">
        <!-- <div style="height: 15%; border: 1px solid #fff; margin-bottom: 3.5%">

          <warehouseBoard6></warehouseBoard6>
        </div> -->

        <warehouseBoard1 :key="key"></warehouseBoard1>
      </div>
      <div class="right">
        <div class="right-item1">
          <warehouseBoard2 :key="key"></warehouseBoard2>
        </div>

        <div class="right-item2">
          <warehouseBoard3 :key="key"></warehouseBoard3>
        </div>

        <div class="right-item3">
          <ps-borderbox5 class="ps_w_h_100 item-content">
            <div class="item-sub">
              <warehouseBoard4 :key="key"></warehouseBoard4>
            </div>
            <div class="item-sub">
              <warehouseBoard5 :key="key"></warehouseBoard5>
            </div>
          </ps-borderbox5>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.warehouseBoard {
  display: flex;
  flex-direction: column;
  color: #fff;
  .title {
    width: 100%;

    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    font-weight: 700;
    border: #fff solid 2px;
    flex-shrink: 0;
  }
}

.content {
  flex: 1;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  overflow: hidden;

  .left {
    width: 30%;
  }

  .right {
    width: 68%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .right-item1 {
      width: 100%;
      padding: 0 4px;
      height: 15%;
    }

    .right-item2 {
      width: 100%;
      padding: 0 4px;
      height: 40%;
    }

    .right-item3 {
      width: 100%;
      padding: 0 4px;
      height: 40%;

      .item-sub {
        flex: 1;
        flex-shrink: 0;
        width: 50%;
        height: 100%;
      }
    }
  }
}

:deep(.f-wh-4-s1) {
  display: flex;
  padding: 5px;
}
</style>
